<template>
	<view>
		<view class="wrap-video" @click="showTop">
			<view class="teacher-video" v-show="isShow">
				<view :style="{height:'100%',width:'100%',position:'relative'}" v-for="item in videoIdList" :key="item" v-if="item==teach_id" :id="`remote_video_`+item">
					<view class="teach-name u-line-1">{{teach_name}}</view>
				</view>
				<!-- <view v-else class="teach_bg"></view> -->
			</view>
			<view class="teacher-video bg_img" v-show="!isShow"></view>
			<view class="student-video" v-if="isOccupy">
				<view class="videoConent" id="local_stream" v-show="isOwn">
					<view class="my-name u-line-1">{{my_name}}</view>
				</view>
				<view style="height: 100%;width: 100%;" v-show="!isOwn">
					<view :style="{height:'100%',width:'100%',position:'relative'}" v-for="(item,index) in videoIdList" :key="index" v-if="item!=teach_id" :id="`remote_video_`+item">
						<view class="user-name u-line-1">{{item | fillname(save_room_msg)}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			isOccupy:{
				type:Boolean,
				default:false
			},
			teach_id:{
				type:[String,Number]
			},
			videoIdList:{
				type:Array
			},
			isOwn:{
				type:Boolean,
				default:false
			},
			my_name:{
				type:String
			},
			teach_name:{
				type:String
			},
			save_room_msg:{
				type:Array,
				default:{
					return:[]
				}
			},
			isShow:{
				type:Boolean,
			},
		},
		data(){
			return{
				
			}
		},
		filters:{
			fillname(val,msg){
				var name = '学生'
				msg.forEach((el,key)=>{
					if(val==el.uid) name = el.userName
				})
				return name
			}
		},
		methods:{
			showTop(){
				this.$emit('showMeth','block');
			},
		}
	}
</script>

<style lang="scss" scoped>
	.wrap-video{
		height: 382rpx;
		width: 100%;
		position: relative;
		.teacher-video{
			height: 100%;
			width: 100%;
			position: absolute;
			.teach-name{
				position: absolute;
				font-size: 22rpx;
				color: #FFFFFF;
				bottom: 0;
				height: 32rpx;
				line-height: 32rpx;
				text-indent: 15rpx;
				width: 100%;
				background: rgba(0, 0, 0,1);
				z-index: 10;
				opacity: 0.4;
			}
			.teach_bg{
				height: 100%;
				width: 100%;
				background-image: url(../../../static/images/course/cam_off.png);
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}
		}
		.student-video{
			height: 144rpx;
			width: 254rpx;
			position: absolute;
			right: 0;
			top: 0;
			z-index: 100;
			.user-name{
				position: absolute;
				font-size: 22rpx;
				color: #FFFFFF;
				bottom: 0;
				height: 32rpx;
				line-height: 32rpx;
				text-indent: 15rpx;
				width: 100%;
				background: rgba(0, 0, 0,1);
				z-index: 10;
				opacity: 0.4;
			}
			.videoConent{
				height: 100%;
				width: 100%;
				position: relative;
				.my-name{
					position: absolute;
					font-size: 22rpx;
					color: #FFFFFF;
					bottom: 0;
					height: 32rpx;
					line-height: 32rpx;
					text-indent: 15rpx;
					width: 100%;
					background: rgba(0, 0, 0,1);
					z-index: 10;
					opacity: 0.4;
				}
			}
		}
	}
</style>
